<template>
  <div class="order-details-wrapper">
    <!-- 顶部标题栏 -->
    <header>
      <div class="back-button" @click="goBack">
        <i class="fa fa-angle-left"></i>
      </div>
      <p>订单详情</p>
    </header>
    
    <!-- 加载状态 -->
    <div v-if="isLoading" class="loading-container">
      <div class="loading-spinner">
        <i class="fa fa-refresh fa-spin"></i>
      </div>
      <p>加载订单信息中...</p>
    </div>
    
    <div v-else class="main-content">
      <!-- 顶部状态区 -->
      <div class="status-section" :class="getStatusSectionClass(orderDetails.orderState)">
        <div class="status-header">
          <div class="status-icon">
            <i class="fa" :class="getStatusIcon(orderDetails.orderState)"></i>
          </div>
          <div class="status-text">{{ getOrderStatusText(orderDetails.orderState) }}</div>
        </div>
        <div class="status-actions">
          <button class="contact-btn">
            <i class="fa fa-phone"></i>
            联系商家
          </button>
          <button class="reorder-btn">
            <i class="fa fa-refresh"></i>
            再来一单
          </button>
          <button 
            v-if="orderDetails.orderState >= 2 && orderDetails.orderState < 4" 
            class="confirm-btn" 
            @click="confirmReceive(orderDetails.id)"
            title="确认收货"
          >
            <i class="fa fa-check"></i>
            确认收货
          </button>
          <!-- 添加取消订单按钮 -->
          <button 
            v-if="orderDetails.orderState === 1" 
            class="cancel-btn" 
            @click="cancelOrder(orderDetails.id)"
          >
            <i class="fa fa-ban"></i>
            取消订单
          </button>
          <!-- 添加申请售后按钮 -->
          <button 
            v-if="orderDetails.orderState >= 2 && orderDetails.orderState <= 4 && orderDetails.orderState !== 5 && orderDetails.orderState !== 6" 
            class="refund-btn" 
            @click="openRefundForm(orderDetails.id)"
          >
            <i class="fa fa-reply"></i>
            申请售后
          </button>
        </div>
        
        <!-- 添加退款状态说明 -->
        <div class="refund-status-info" v-if="orderDetails.orderState === 5">
          <p>您的退款申请正在审核中，请耐心等待商家处理</p>
        </div>
        <div class="refund-status-info" v-if="orderDetails.orderState === 6">
          <p>退款已成功处理，资金将按原支付方式退回</p>
        </div>
      </div>
      
      <!-- 订单信息卡片 -->
      <div class="card order-info-card">
        <div class="card-header" @click="toggleOrderInfo">
          <span>订单信息</span>
          <i class="fa" :class="orderInfoExpanded ? 'fa-angle-up' : 'fa-angle-down'"></i>
        </div>
        <div class="card-body" v-if="orderInfoExpanded">
          <div class="info-item">
            <span class="info-label">收货地址</span>
            <div class="info-value address-info">
              <p v-if="orderDetails.address">
                {{ orderDetails.address }}
              </p>
              <p v-else-if="orderDetails.deliveryAddress && orderDetails.deliveryAddress.address">
                {{ orderDetails.deliveryAddress.address }}
              </p>
              <p v-else>配送地址未找到</p>
              <p class="contact-detail" v-if="orderDetails.contactName">
                {{ orderDetails.contactName }}
                {{ orderDetails.contactSex === 1 ? '先生' : '女士' }} 
                {{ orderDetails.contactTel || '' }}
              </p>
              <p class="contact-detail" v-else-if="orderDetails.deliveryAddress && orderDetails.deliveryAddress.contactName">
                {{ orderDetails.deliveryAddress.contactName }}
                {{ orderDetails.deliveryAddress.contactSex === 1 ? '先生' : '女士' }} 
                {{ orderDetails.deliveryAddress.contactTel || '' }}
              </p>
            </div>
          </div>
          <div class="info-item">
            <span class="info-label">订单编号</span>
            <span class="info-value">{{ orderDetails.id }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">下单时间</span>
            <span class="info-value">{{ formatDateTime(orderDetails.orderDate) }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">支付方式</span>
            <span class="info-value">在线支付</span>
          </div>
        </div>
      </div>
      
      <!-- 商品费用卡片 -->
      <div class="card food-cost-card">
        <div class="card-header restaurant-header">
          <div class="restaurant-info">
            <div class="restaurant-logo" v-if="orderDetails.business && orderDetails.business.image">
              <img :src="orderDetails.business.image" alt="商家Logo" />
            </div>
            <div v-else class="restaurant-logo restaurant-logo-default">
              <i class="fa fa-cutlery"></i>
            </div>
            <span class="restaurant-name">{{ orderDetails.business ? orderDetails.business.businessName : '未知商家' }}</span>
          </div>
        </div>
        
        <div class="food-items-list">
          <div 
            v-for="detail in orderDetails.orderDetailets" 
            :key="detail.id" 
            class="food-item"
          >
            <div class="food-image">
              <img 
                :src="detail.foodImg || getFoodImage(detail)" 
                :alt="detail.foodName || (detail.food ? detail.food.foodName : '商品图片')"
                @error="handleImageError($event, detail)"
              />
            </div>
            <div class="food-info">
              <div class="food-name">{{ detail.foodName || (detail.food ? detail.food.foodName : '商品名称缺失') }}</div>
              <div class="food-spec">{{ detail.foodDescription || (detail.food ? detail.food.foodExplain || '标准规格' : '规格信息缺失') }}</div>
            </div>
            <div class="food-price-info">
              <div class="food-quantity">x{{ detail.quantity }}</div>
              <div class="food-price">¥{{ (detail.foodPrice ? detail.foodPrice * detail.quantity : (detail.food ? (detail.food.foodPrice * detail.quantity) : 0)).toFixed(2) }}</div>
            </div>
          </div>
        </div>
        
        <div class="cost-details">
          <div class="cost-item">
            <span>商品小计</span>
            <span>¥{{ calculateFoodTotal() }}</span>
          </div>
          <div class="cost-item">
            <span>打包费</span>
            <span>¥{{ orderDetails.business ? orderDetails.business.packagingPrice || '0.00' : '0.00' }}</span>
          </div>
          <div class="cost-item">
            <span>配送费</span>
            <span>¥{{ orderDetails.business ? orderDetails.business.deliveryPrice || '0.00' : '0.00' }}</span>
          </div>
          <div class="cost-item discount" v-if="hasDiscount()">
            <span>红包/优惠</span>
            <span>-¥{{ calculateDiscount() }}</span>
          </div>
          <div class="cost-item total">
            <span>合计</span>
            <span>¥{{ orderDetails.orderTotal }}</span>
          </div>
        </div>
      </div>
      
      <!-- 退款进度卡片 -->
      <div class="card refund-progress-card" v-if="orderDetails.orderState === 5 || orderDetails.orderState === 6">
        <div class="card-header">
          <span>退款进度</span>
        </div>
        <div class="card-body">
          <!-- 退款原因 -->
          <div class="refund-reason-section" v-if="refundDetails">
            <div class="reason-title">退款原因</div>
            <div class="reason-content">{{ refundDetails.reason }}</div>
            <div v-if="refundDetails.detail" class="detail-title">详情说明</div>
            <div v-if="refundDetails.detail" class="detail-content">{{ refundDetails.detail }}</div>
          </div>
          
          <div class="refund-divider"></div>
          
          <div class="progress-timeline">
            <div class="timeline-item" :class="{ completed: true }">
              <div class="timeline-dot"></div>
              <div class="timeline-content">
                <div class="timeline-title">提交退款申请</div>
                <div class="timeline-time">{{ formatDateTime(refundDetails ? refundDetails.applyTime : orderDetails.orderDate) }}</div>
              </div>
            </div>
            <div class="timeline-line" :class="{ completed: orderDetails.orderState >= 5 }"></div>
            <div class="timeline-item" :class="{ completed: orderDetails.orderState >= 5 }">
              <div class="timeline-dot"></div>
              <div class="timeline-content">
                <div class="timeline-title">商家审核中</div>
                <div class="timeline-desc" v-if="orderDetails.orderState === 5">正在等待商家处理您的退款申请</div>
                <div class="timeline-desc" v-else>商家已处理您的退款申请</div>
              </div>
            </div>
            <div class="timeline-line" :class="{ completed: orderDetails.orderState === 6 }"></div>
            <div class="timeline-item" :class="{ completed: orderDetails.orderState === 6 }">
              <div class="timeline-dot"></div>
              <div class="timeline-content">
                <div class="timeline-title">退款完成</div>
                <div class="timeline-desc" v-if="orderDetails.orderState === 6">退款已成功处理，资金将按原支付方式退回</div>
                <div class="timeline-time" v-if="refundDetails && refundDetails.processTime">
                  处理时间: {{ formatDateTime(refundDetails.processTime) }}
                </div>
                <div class="timeline-desc" v-else>等待商家确认</div>
              </div>
            </div>
          </div>
          
          <!-- 拒绝原因显示 -->
          <div class="reject-reason-section" v-if="refundDetails && refundDetails.status === 2 && refundDetails.rejectReason">
            <div class="reject-title">拒绝原因</div>
            <div class="reject-content">{{ refundDetails.rejectReason }}</div>
          </div>
        </div>
      </div>
      
      <!-- 评价卡片 - 修改条件，让退款成功状态也可以评价 -->
      <div class="card review-card" v-if="orderDetails.orderState === 4 || orderDetails.orderState === 6">
        <div class="card-header">
          <span>评价订单</span>
        </div>
        <div class="card-body review-section">
          <button 
            v-if="!orderDetails.reviewed" 
            class="review-btn"
            @click="openReviewModal(orderDetails)"
          >
            <i class="fa fa-star"></i>
            评价订单
          </button>
          <div v-else class="reviewed-status">
            <i class="fa fa-check-circle"></i>
            已评价
          </div>
        </div>
      </div>
    </div>
    
    <!-- 评价弹窗 -->
    <ReviewForm
      v-if="showReviewModal"
      :order="orderDetails"
      :is-open="showReviewModal"
      @close="closeReviewModal"
      @success="handleReviewSuccess"
    ></ReviewForm>

    <!-- 退款原因弹窗 -->
    <RefundReasonForm
      v-if="showRefundForm"
      :order-id="orderId"
      :is-open="showRefundForm"
      @close="closeRefundForm"
      @submit="handleRefundSubmit"
    ></RefundReasonForm>
  </div>
</template>

<script setup>
import { ref, onMounted, inject } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { orderApi, refundApi } from '../api';
import ReviewForm from "../components/ReviewForm.vue";
import RefundReasonForm from "../components/RefundReasonForm.vue";

const router = useRouter();
const route = useRoute();
const axios = inject('axios'); // 注入axios实例

const orderId = ref(null);
const orderDetails = ref({});
const isLoading = ref(true);
const orderInfoExpanded = ref(true);
const showReviewModal = ref(false);
const showRefundForm = ref(false);
const refundDetails = ref(null);

// 初始化数据
const init = async () => {
  isLoading.value = true;
  
  try {
    // 从路由参数中获取订单ID
    orderId.value = route.params.orderId;
    
    if (!orderId.value) {
      console.error('未找到订单ID参数');
      alert('未找到订单信息，请返回订单列表重试');
      router.push('/orderList');
      return;
    }
    
    console.log('正在获取订单详情，订单ID:', orderId.value);
    
    // 获取订单详情
    const order = await orderApi.getOrderById(orderId.value);
    console.log('获取订单成功:', order);
    
    // 获取订单商品详情
    const detailets = await orderApi.getOrderDetailets(orderId.value);
    console.log('获取订单商品详情成功:', detailets);
    
    // 检查订单是否已评价
    try {
      console.log(`正在检查订单 ${orderId.value} 的评价状态...`);
      const reviewResponse = await axios.get(`/api/reviews/order/${orderId.value}`);
      console.log(`订单 ${orderId.value} 评价状态响应:`, reviewResponse);
      
      // 任何非空响应都表示订单已评价
      if (reviewResponse && 
          ((reviewResponse.data && reviewResponse.data !== null) || 
          (reviewResponse.id !== undefined))) {
        console.log(`订单 ${orderId.value} 已评价，标记为reviewed=true`);
        order.reviewed = true;
      } else {
        console.log(`订单 ${orderId.value} 未评价，标记为reviewed=false`);
        order.reviewed = false;
      }
    } catch (reviewError) {
      // 如果获取评价失败，假设订单未评价
      console.log(`订单 ${orderId.value} 评价状态检查失败:`, reviewError);
      order.reviewed = false;
    }
    
    // 如果订单状态是退款相关，获取退款详情
    if (order.orderState === 5 || order.orderState === 6) {
      try {
        const refundInfo = await refundApi.getRefundDetailsByOrderId(orderId.value);
        console.log('获取退款详情成功:', refundInfo);
        refundDetails.value = refundInfo;
      } catch (error) {
        console.error('获取退款详情失败:', error);
      }
    }
    
    // 合并数据
    order.orderDetailets = detailets;
    orderDetails.value = order;
    
  } catch (error) {
    console.error('获取订单详情失败:', error);
    alert('获取订单详情失败，请稍后重试');
  } finally {
    isLoading.value = false;
  }
};

// 返回上一页
const goBack = () => {
  router.back();
};

// 切换订单信息展开/收起状态
const toggleOrderInfo = () => {
  orderInfoExpanded.value = !orderInfoExpanded.value;
};

// 更新订单状态文本函数
// 获取订单状态文本
const getOrderStatusText = (orderState) => {
  const statusMap = {
    0: '订单已取消',
    1: '等待付款',
    2: '商家正在接单',
    3: '商家正在制作',
    4: '订单已完成',
    5: '退款审核中', // 保持不变
    6: '退款成功'    // 改为"退款成功"更友好
  };
  return statusMap[orderState] || '未知状态';
};

// 获取状态对应的图标
const getStatusIcon = (orderState) => {
  const iconMap = {
    0: 'fa-times-circle',
    1: 'fa-clock-o',
    2: 'fa-hourglass-half',
    3: 'fa-cutlery',
    4: 'fa-check-circle',
    5: 'fa-spinner fa-pulse',
    6: 'fa-undo'
  };
  return iconMap[orderState] || 'fa-question-circle';
};

// 格式化日期时间
const formatDateTime = (dateTimeStr) => {
  if (!dateTimeStr) return '未知时间';
  
  try {
    const date = new Date(dateTimeStr);
    
    // 检查日期是否有效
    if (isNaN(date.getTime())) {
      return dateTimeStr; // 返回原始字符串，如果日期无效
    }
    
    // 格式化为 "YYYY-MM-DD HH:MM:SS" 格式
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  } catch (error) {
    console.error('日期格式化错误:', error);
    return dateTimeStr; // 出错时返回原始字符串
  }
};

// 处理食品图片URL
const getFoodImage = (detail) => {
  // 首先尝试使用快照字段
  if (detail.foodImg) {
    if (detail.foodImg.startsWith('http')) {
      return detail.foodImg;
    } else {
      return getDefaultFoodImage(detail.foodName || '');
    }
  }
  // 如果快照字段不存在，再使用关联的food对象
  else if (detail.food && detail.food.foodImg) {
    // 有些foodImg可能是完整的URL，有些可能只是相对路径
    if (detail.food.foodImg.startsWith('http')) {
      return detail.food.foodImg;
    } else {
      // 使用前端中的一些默认食品图片作为替代
      return getDefaultFoodImage(detail.food.foodName);
    }
  } else {
    // 如果没有图片，返回默认图片
    return getDefaultFoodImage(detail.foodName || (detail.food ? detail.food.foodName : ''));
  }
};

// 处理图片加载失败
const handleImageError = (event, detail) => {
  console.warn(`图片加载失败: ${detail.food ? detail.food.foodName : '未知商品'}`, event.target.src);
  // 替换为默认图片
  event.target.src = getDefaultFoodImage(detail.food ? detail.food.foodName : '');
};

// 根据食品名称返回默认图片
const getDefaultFoodImage = (foodName = '') => {
  // 根据名称首字母或关键词选择默认图片
  const foodNameLower = foodName.toLowerCase();
  
  if (foodNameLower.includes('汉堡') || foodNameLower.includes('burger')) {
    return '/src/assets/sp01.png';
  } else if (foodNameLower.includes('披萨') || foodNameLower.includes('pizza')) {
    return '/src/assets/sp02.png';
  } else if (foodNameLower.includes('炸鸡') || foodNameLower.includes('chicken')) {
    return '/src/assets/sp03.png';
  } else if (foodNameLower.includes('冰淇淋') || foodNameLower.includes('ice cream')) {
    return '/src/assets/sp04.png';
  } else if (foodNameLower.includes('沙拉') || foodNameLower.includes('salad')) {
    return '/src/assets/sp05.png';
  } else if (foodNameLower.includes('蛋糕') || foodNameLower.includes('cake')) {
    return '/src/assets/sp06.png';
  } else if (foodNameLower.includes('咖啡') || foodNameLower.includes('coffee')) {
    return '/src/assets/sp07.png';
  } else if (foodNameLower.includes('奶茶') || foodNameLower.includes('tea')) {
    return '/src/assets/sp08.png';
  } else {
    // 默认图片，根据字符串的哈希值选择一个
    const images = [
      '/src/assets/sp09.png', 
      '/src/assets/sp10.png', 
      '/src/assets/sp11.png', 
      '/src/assets/sp12.png'
    ];
    
    // 简单哈希函数，将字符串映射到图片数组索引
    const hash = foodName.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0) % images.length;
    return images[hash];
  }
};

// 计算商品总价
const calculateFoodTotal = () => {
  if (!orderDetails.value.orderDetailets) return '0.00';
  
  const total = orderDetails.value.orderDetailets.reduce((sum, item) => {
    // 优先使用快照价格
    if (item.foodPrice) {
      return sum + (item.foodPrice * item.quantity);
    } else if (item.food) {
      return sum + (item.food.foodPrice * item.quantity);
    }
    return sum;
  }, 0);
  
  return total.toFixed(2);
};

// 检查是否有优惠/折扣
const hasDiscount = () => {
  const foodTotal = parseFloat(calculateFoodTotal());
  const packagingPrice = orderDetails.value.business ? parseFloat(orderDetails.value.business.packagingPrice || 0) : 0;
  const deliveryPrice = orderDetails.value.business ? parseFloat(orderDetails.value.business.deliveryPrice || 0) : 0;
  const orderTotal = parseFloat(orderDetails.value.orderTotal || 0);
  
  // 如果订单总价小于商品总价+包装费+配送费，则有折扣
  return orderTotal < (foodTotal + packagingPrice + deliveryPrice);
};

// 计算折扣金额
const calculateDiscount = () => {
  const foodTotal = parseFloat(calculateFoodTotal());
  const packagingPrice = orderDetails.value.business ? parseFloat(orderDetails.value.business.packagingPrice || 0) : 0;
  const deliveryPrice = orderDetails.value.business ? parseFloat(orderDetails.value.business.deliveryPrice || 0) : 0;
  const orderTotal = parseFloat(orderDetails.value.orderTotal || 0);
  
  const discount = (foodTotal + packagingPrice + deliveryPrice) - orderTotal;
  return discount > 0 ? discount.toFixed(2) : '0.00';
};

// 打开评价弹窗
const openReviewModal = (order) => {
  showReviewModal.value = true;
};

// 关闭评价弹窗
const closeReviewModal = () => {
  showReviewModal.value = false;
};

// 评价提交成功处理
const handleReviewSuccess = (reviewData) => {
  console.log('评价提交成功，响应数据:', reviewData);
  
  // 更新订单评价状态
  orderDetails.value.reviewed = true;
  
  // 关闭弹窗
  closeReviewModal();
  
  // 显示成功信息
  alert("评价提交成功！");
};

// 取消订单
const cancelOrder = async (orderId) => {
  if (!confirm('确定要取消此订单吗？')) {
    return;
  }
  
  try {
    console.log(`取消订单: ${orderId}`);
    await orderApi.cancelOrder(orderId);
    
    // 更新本地订单状态
    orderDetails.value.orderState = 0;
    
    alert('订单已成功取消');
  } catch (error) {
    console.error(`取消订单失败: ${error}`);
    alert(`取消订单失败: ${error.message || '请稍后重试'}`);
  }
};

// 打开退款申请表单
const openRefundForm = (orderId) => {
  showRefundForm.value = true;
};

// 关闭退款申请表单
const closeRefundForm = () => {
  showRefundForm.value = false;
};

// 处理退款申请提交
const handleRefundSubmit = async (refundData) => {
  try {
    console.log('提交退款申请数据:', refundData);
    
    // 调用退款API
    await refundApi.applyRefund(refundData.orderId, {
      reason: refundData.reason,
      detail: refundData.detail
    });
    
    // 更新本地订单状态为"退款审核中"
    orderDetails.value.orderState = 5;
    
    // 关闭弹窗
    closeRefundForm();
    
    alert('申请售后成功，请等待商家审核');
  } catch (error) {
    console.error(`申请售后失败: ${error}`);
    alert(`申请售后失败: ${error.message || '请稍后重试'}`);
  }
};

// 获取状态区域的样式类
const getStatusSectionClass = (orderState) => {
  switch (orderState) {
    case 5: return 'refunding';
    case 6: return 'refunded';
    default: return '';
  }
};

// 初始化数据
onMounted(() => {
  init();
});

// 确认收货：更新订单状态为已完成(4)
const confirmReceive = async (orderId) => {
  try {
    await orderApi.updateOrderStatus(orderId, 4);
    orderDetails.value.orderState = 4;
    alert('已确认收货，资金将结算至商家');
  } catch (error) {
    console.error('确认收货失败:', error);
    alert(`确认收货失败: ${error.message || '请稍后重试'}`);
  }
};
</script>

<style scoped>
.order-details-wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* 顶部标题栏 */
header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1000;
  font-size: 4.8vw;
  font-weight: 500;
}

.back-button {
  position: absolute;
  left: 4vw;
  font-size: 5vw;
  cursor: pointer;
  padding: 2vw;
}

/* 加载状态 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50vh;
  color: #666;
}

.loading-spinner {
  margin-bottom: 4vw;
}

.loading-spinner i {
  font-size: 10vw;
  color: #0097ff;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 主内容区域 */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 3vw 3vw 20vw;
  -webkit-overflow-scrolling: touch;
}

/* 订单状态区域 */
.status-section {
  background-color: #0097ff;
  border-radius: 2vw;
  padding: 4vw;
  color: #fff;
  margin-bottom: 3vw;
}

/* 添加退款状态的特殊样式 */
.status-section.refunding {
  background-color: #ff9800;
}

.status-section.refunded {
  background-color: #8bc34a;
}

.status-header {
  display: flex;
  align-items: center;
  gap: 3vw;
  margin-bottom: 4vw;
}

.status-icon {
  font-size: 8vw;
}

.status-text {
  font-size: 5vw;
  font-weight: 600;
}


.status-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 2vw;
  row-gap: 2vw;
}

.status-actions button {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4vw;
  padding: 1.6vw 0;
  border-radius: 1vw;
  font-size: 3.2vw;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.98);
  color: #0097ff;
  white-space: nowrap;
  box-sizing: border-box;
}

.status-actions button i {
  font-size: 3.6vw;
}

.cancel-btn {
  background-color: rgba(255, 255, 255, 0.98) !important;
  color: #f44336 !important;
}

.refund-btn {
  background-color: rgba(255, 255, 255, 0.98) !important;
  color: #ff9800 !important;
}

.confirm-btn {
  background-color: rgba(255, 255, 255, 0.98) !important;
  color: #4caf50 !important;
}

@media (max-width: 480px) {
  .status-actions { grid-template-columns: repeat(2, 1fr); }
}

/* 卡片通用样式 */
.card {
  background-color: #fff;
  border-radius: 2vw;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 3vw;
  overflow: hidden;
}

.card-header {
  padding: 3vw 4vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f1f1f1;
  font-size: 4vw;
  font-weight: 600;
  color: #333;
}

.card-body {
  padding: 3vw 4vw;
}

/* 订单信息卡片 */
.info-item {
  display: flex;
  padding: 2vw 0;
  border-bottom: 1px solid #f5f5f5;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  width: 20vw;
  font-size: 3.6vw;
  color: #666;
}

.info-value {
  flex: 1;
  font-size: 3.6vw;
  color: #333;
}

.address-info {
  display: flex;
  flex-direction: column;
  gap: 1vw;
}

.contact-detail {
  font-size: 3.4vw;
  color: #666;
}

/* 餐厅头部 */
.restaurant-header {
  padding: 3vw 4vw;
}

.restaurant-info {
  display: flex;
  align-items: center;
  gap: 3vw;
}

.restaurant-logo {
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.restaurant-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.restaurant-logo-default {
  background-color: #ffab40;
  color: #fff;
  font-size: 5vw;
}

.restaurant-name {
  font-size: 4vw;
  font-weight: 600;
  color: #333;
}

/* 商品列表 */
.food-items-list {
  padding: 0 4vw;
}

.food-item {
  display: flex;
  padding: 3vw 0;
  border-bottom: 1px solid #f5f5f5;
}

.food-item:last-child {
  border-bottom: none;
}

.food-image {
  width: 15vw;
  height: 15vw;
  border-radius: 1vw;
  overflow: hidden;
  background-color: #f5f5f5;
  margin-right: 3vw;
}

.food-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.food-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.food-name {
  font-size: 3.8vw;
  color: #333;
  font-weight: 500;
  margin-bottom: 1vw;
}

.food-spec {
  font-size: 3.4vw;
  color: #999;
}

.food-price-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-width: 15vw;
}

.food-quantity {
  font-size: 3.4vw;
  color: #666;
  margin-bottom: 1vw;
}

.food-price {
  font-size: 3.8vw;
  color: #ff6b35;
  font-weight: 600;
}

/* 费用明细 */
.cost-details {
  padding: 3vw 4vw;
  border-top: 1px solid #f5f5f5;
}

.cost-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2vw 0;
  font-size: 3.6vw;
  color: #666;
}

.cost-item.discount {
  color: #f44336;
}

.cost-item.total {
  padding-top: 3vw;
  border-top: 1px solid #f5f5f5;
  margin-top: 2vw;
  font-size: 4vw;
  font-weight: 600;
  color: #333;
}

.cost-item.total span:last-child {
  color: #ff6b35;
  font-size: 4.5vw;
}

/* 评价卡片 */
.review-section {
  display: flex;
  justify-content: center;
  padding: 4vw 0;
}

.review-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2vw;
  padding: 2vw 8vw;
  border-radius: 5vw;
  font-size: 4vw;
  font-weight: 500;
  border: none;
  background-color: #4caf50;
  color: #fff;
  cursor: pointer;
}

.reviewed-status {
  display: flex;
  align-items: center;
  gap: 2vw;
  font-size: 4vw;
  color: #8bc34a;
}

.reviewed-status i {
  font-size: 5vw;
}

/* 添加退款状态信息样式 */
.refund-status-info {
  margin-top: 3vw;
  padding-top: 3vw;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 3.6vw;
  text-align: center;
}

.refund-status-info p {
  margin: 0;
  line-height: 1.4;
}

/* 添加退款进度卡片样式 */
.refund-progress-card {
  margin-bottom: 3vw;
}

.progress-timeline {
  padding: 2vw 0;
}

.timeline-item {
  display: flex;
  position: relative;
  padding: 3vw 0;
}

.timeline-dot {
  width: 4vw;
  height: 4vw;
  border-radius: 50%;
  background-color: #ddd;
  margin-right: 3vw;
  position: relative;
  z-index: 2;
}

.timeline-item.completed .timeline-dot {
  background-color: #4caf50;
}

.timeline-line {
  position: absolute;
  top: 7vw;
  left: 2vw;
  width: 0.5vw;
  height: calc(100% - 7vw);
  background-color: #ddd;
  z-index: 1;
}

.timeline-line.completed {
  background-color: #4caf50;
}

.timeline-content {
  flex: 1;
}

.timeline-title {
  font-weight: 600;
  font-size: 3.8vw;
  color: #333;
  margin-bottom: 1vw;
}

.timeline-item.completed .timeline-title {
  color: #4caf50;
}

.timeline-time {
  font-size: 3.2vw;
  color: #999;
}

.timeline-desc {
  font-size: 3.4vw;
  color: #666;
  margin-top: 1vw;
}

/* 添加退款原因和拒绝原因样式 */
.refund-reason-section {
  margin-bottom: 4vw;
}

.reason-title, .detail-title, .reject-title {
  font-size: 3.8vw;
  font-weight: 600;
  color: #333;
  margin-bottom: 2vw;
}

.reason-content, .detail-content, .reject-content {
  font-size: 3.6vw;
  color: #666;
  line-height: 1.5;
  background-color: #f9f9f9;
  padding: 3vw;
  border-radius: 2vw;
  margin-bottom: 2vw;
}

.reject-reason-section {
  margin-top: 4vw;
  padding-top: 4vw;
  border-top: 1px solid #eee;
}

.reject-title {
  color: #f44336;
}

.refund-divider {
  height: 1px;
  background-color: #eee;
  margin: 4vw 0;
}
</style> 
